<template>
  <div class="success-page">
    <n-card class="success-card cute-card">
      <div class="success-content">
        <div class="success-icon">
          <n-icon size="64" color="#52c41a">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><path d="M22 4L12 14.01l-3-3"></path></g></svg>
          </n-icon>
        </div>
        
        <h1 class="success-title">提交成功</h1>
        <p class="success-desc">您的简历信息已成功提交，感谢您的参与！</p>
        
        <div class="success-actions">
          <n-button type="primary" size="large" round @click="handleClose">
            关闭页面
          </n-button>
        </div>
      </div>
    </n-card>
    
    <div class="success-decoration">
      <div class="cute-decoration heart" style="top: 10%; left: 10%;"></div>
      <div class="cute-decoration heart" style="top: 20%; right: 15%;"></div>
      <div class="cute-decoration heart" style="bottom: 15%; left: 20%;"></div>
    </div>
  </div>
</template>

<script setup>
// 关闭页面
const handleClose = () => {
  window.close()
}
</script>

<style scoped>
.success-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-color);
  padding: 20px;
  position: relative;
}

.success-card {
  width: 100%;
  max-width: 500px;
  padding: 20px;
}

.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
}

.success-icon {
  margin-bottom: 24px;
  background-color: rgba(82, 196, 26, 0.1);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-title {
  font-size: 24px;
  color: #52c41a;
  margin-bottom: 16px;
}

.success-desc {
  font-size: 16px;
  color: #666;
  text-align: center;
  margin-bottom: 32px;
}

.success-actions {
  display: flex;
  gap: 16px;
}

.success-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
</style> 